<template>
  <div class="tab-content-wrap" v-loading="loading">
    <u-descriptions-list :column-config="descriptions">
      <template
        v-for="item in descriptionsSlotList"
        :slot="item.slot"
      >
        <template v-if="item.value !== null">
          <el-tag size="small" effect="dark" :type="isTagType(item.value,item.higherIsDanger || false)">
            {{ item.value ? item.value + '%': "-" }}
          </el-tag>
        </template>
      </template>
    </u-descriptions-list>
  </div>
</template>

<script>
import UDescriptionsList from '@/components/UDescriptionsList'
import {reqDeploymentByDeviceId, reqSystemByDeviceId} from "@/api/operationAndMonitoring/deviceMonitoring";
import {warning} from "@riophae/vue-treeselect/src/utils";

export default {
  name: "DeviceRunParameter",
  dicts: ['warnValue'],
  props: {
    deviceId: {
      type: String,
      required: true
    }
  },
  components: {
    UDescriptionsList,
  },
  data() {
    return {
      descriptions: [
        {label: '操作系统', key: 'osVersion', span: '1', value: ''},
        {label: '中间件版本', key: 'middlewareVersion', span: '1', value: ''},
        {label: '本机IP地址', key: 'ipAddress', span: '1', value: ''},
        {label: '本机MAC地址', key: 'mac', span: '1', value: ''},
        {label: 'CPU', key: 'cpu', span: '1', value: ''},
        {label: 'CPU使用率', key: 'cpuRate', span: '1', value: '', slot: 'cpuRate', higherIsDanger: true},
        {label: '内存', key: 'memory', span: '1', value: ''},
        {label: '内存使用率', key: 'memoryRate', span: '1', value: '', slot: 'memoryRate', higherIsDanger: true},
        {label: '硬盘', key: 'disk', span: '1', value: ''},
        {label: '硬盘使用率', key: 'diskRate', span: '1', value: '', slot: 'diskRate', higherIsDanger: true},
        {label: 'C（青色）', key: 'ccolor', span: '1', value: '', slot: 'ccolor'},
        {label: 'M（品红色）', key: 'mcolor', span: '1', value: '', slot: 'mcolor'},
        {label: 'Y（黄色）', key: 'ycolor', span: '1', value: '', slot: 'ycolor'},
        {label: 'K（黑色）', key: 'kcolor', span: '1', value: '', slot: 'kcolor'},
        {label: '纸张剩余量百分比', key: 'paperRate', span: '2', value: '', slot: 'paperRate'},
        {label: '其他检测到的状态信息', key: 'otherMessage', span: '2', value: ''},
        {label: '数据更新时间', key: 'updateTime', span: '2', value: ''},
      ],
      loading: false,
      // 告警阈值
      warningRange:{
        heightIsDanger: 70,
        warning: 50,
        lowIsDanger: 30,
      }
    }
  },
  computed:{
    descriptionsSlotList(){
      return this.descriptions.filter(item => item.slot)
    }
  },
  methods: {
    isTagType(num, higherIsDanger = true) {
      if (num === null) return '';
      let percentNum = parseInt(num);
      if (higherIsDanger) { //数值高为红色警告 小于30为success 30 - 70为wraning 大于70为danger
        return percentNum <= this.warningRange.lowIsDanger ? 'success' : percentNum < this.warningRange.heightIsDanger ? 'warning' : percentNum >= this.warningRange.heightIsDanger ? 'danger' : '';
      } else { //数值低为红色警告  小于30为danger 30 - 70为wraning  大于70为success
        return percentNum <= this.warningRange.lowIsDanger ? 'danger' : percentNum < this.warningRange.heightIsDanger ? 'warning' : percentNum >= this.warningRange.heightIsDanger ? 'success' : '';
      }
    },
    /** 查询设备模块列表 */
    async getSystemByDeviceId() {
      try {
        this.loading = true;
        const res = await reqSystemByDeviceId({deviceId: this.deviceId})
        if (res.data) {
          this.descriptions.map(item => {
            item.value = res.data[item.key]
            return item
          })
        } else {
          this.$modal.msgWarning("暂无该设备运行参数！")
        }
      } catch (err) {
        console.log("reqSystemByDeviceId 接口数据异常", err)
      } finally {
        this.loading = false;
      }
    },
  },
  watch:{
    'dict.type.warnValue':{
      handler(value){
        value.forEach(item =>{
          if(item.value){
            this.warningRange[item.label] = Number(item.value)
          }
        })
      }
    }
  },
  created() {
    this.getSystemByDeviceId();
  },
}
</script>

<style lang="scss" scoped>

</style>
